<template>
	<view class="wrap">
		<u-waterfall v-model="state.flowList" ref="uWaterfall1">
			<template v-slot:left="{ leftList }">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="toDetail(item.id)">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.spuUrls[0]" loading-img="/static/logo2.png" :index="index"></u-lazy-load>
					<view class="demo-title u-line-2">
						{{ item.name }}
					</view>
					<view class="sub-title u-line-2" v-if="item.subTitle"> {{ item.subTitle }} </view>
					<view class="demo-price text-price"> {{ item.salesPrice }} </view>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="toDetail(item.id)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.spuUrls[0]" :index="index" loading-img="/static/logo2.png"></u-lazy-load>
					<view class="demo-title u-line-2">
						{{ item.name }}
					</view>
					<view class="sub-title u-line-2" v-if="item.subTitle"> {{ item.subTitle }} </view>
					<view class="demo-price text-price"> {{ item.salesPrice }} </view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="#f8f8f8" :status="state.loadStatus"></u-loadmore>
		<u-gap height="100" bg-color="#f8f8f8"></u-gap>
	</view>
</template>

<script setup lang="ts">
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import { getPage } from '@/api/product/spu';
// 定义变量
const state = reactive({
	loadStatus: 'loadmore',
	flowList: [],
});
const page = reactive({
	searchCount: false,
	current: 0,
	size: 10,
	asc: '',
	desc: '', //升序字段
});
// 定义方法

const goodsPage = () => {
	state.loadStatus = 'loading';
	getPage(page).then((response) => {
		let list = response.data.records;
		state.loadStatus = 'loadmore';
		state.flowList = [...state.flowList, ...list];
		if (list.length < page.size) {
			state.loadStatus = 'nomore';
		}
	});
};
onLoad(() => {
	goodsPage();
});
onReachBottom(() => {
	if (state.loadStatus == 'loadmore') {
		page.current = page.current + 1;
		goodsPage();
	}
});
// 跳转商品详情
const toDetail = (id: string) => {
	uni.$hxRouter.push({url:'/pages/product/goods-detail/index?id=' + id});
};
</script>

<style lang="scss" scoped>
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 26rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.sub-title {
	margin-top: 8rpx;
	color: #909399;
	font-size: 12px;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 34rpx;
	color: $u-type-error;
	margin-top: 5px;
}


</style>
